<template>
  <div class="pro-ana-wrap">
    <p class="word-box">康希诺生物股份公司的整体知识产权共<span>279</span>件，其中专利<span>89</span>件，商标<span>62</span>件，软件著作量<span>32</span>件，作品著作量<span>96</span>件，ICP<span>0</span>件。康希诺生物股份公司的专利中发明公布为<span>50</span>件，发明授权为<span>28</span>件，实用新型为<span>10</span>件，外观设计为<span>1</span>件。</p>
    <el-row>
      <el-col :span="12" class="pr-44">
        <h3 class="pro-title">知识产权总申请量</h3>
        <!-- <div :class="item.isHight?'legend-item':'legend-item legend-item-gray'" @click="handleLegend(item,index)" v-for="(item, index) in secondTotal" :key="index">
            <span>{{item.name}}</span><b>{{item.value}}</b>
          </div> -->
        <echarts-3d ref="Echarts3d"></echarts-3d>
      </el-col>
      <el-col :span="12" class="pl-44">
        <h3 class="pro-title">专利类型分析</h3>
        <div class="second-legend">
          <div :class="item.isHight?'legend-item':'legend-item legend-item-gray'" @click="handleLegend(item,index)" v-for="(item, index) in secondTotal" :key="index">
            <span>{{item.name}}</span><b>{{item.value}}</b>
          </div>
        </div>
        <div ref="secondChart" class="second-chart"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" class="pr-44">
        <h3 class="pro-title">专业IPC类别前十</h3>
        <div ref="thirdChart" class="second-chart"></div>
      </el-col>
      <el-col :span="12" class="pl-44">
        <h3 class="pro-title">商标类别前十</h3>
        <div ref="forthChart" class="second-chart"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Echarts3d from '../../../../components/echarts-3d.vue'
import echarts from 'echarts'
export default {
  name: 'propertyAnalysis',
  data () {
    return {
      secondSeries: [],
      chart2: null,
      secondOption: {},
      secondTotal: [
        {
          name: '发明公布',
          value: 12
        },
        {
          name: '发明授权',
          value: 24
        },
        {
          name: '实用新型',
          value: 13
        },
        {
          name: '外观设计',
          value: 20
        },
      ],
      secondYaxis: [],
      secondData: [],
    }
  },
  components: {
    Echarts3d
  },
  created() {

    
    this.secondTotal.forEach(v => {
      this.secondData.push(v.value)
      this.secondYaxis.push(v.name)
      this.$set(v, 'isHight', true)
    })
    this.secondSeries = JSON.parse(JSON.stringify(this.secondData))
  },
  mounted () {
    
    this.initSecond()
    this.initThird()
    this.initForth()
    // this.$nextTick(() => {
      
      
    // })
  },
  methods: {
    initSecond () {
      this.secondOption = {
        color: ['#73C4F7', '#7BDDD0', '#FAC858', '#5DA6FC', '#CCCCCC'],
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '3%',
          right: '4%',
          top:'10%',
          containLabel: true,
          borderColor: '#DDD'
        },
        xAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          },
          axisLabel: {
            color: '#555'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f5f5f5',//网格线的颜色
              width: 1,
              type: 'dashed'
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'category',
          data: this.secondYaxis,
          inverse: true,
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#222'
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        series: [
          {
            name: '发明公布',
            data: this.secondData,
            type: 'bar',
            barWidth: 16,
            label: {
              show: true,
              position: 'right'
            },
            itemStyle: {
              barBorderRadius: [0, 3, 3, 0],
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  let colorList = ['#73C4F7', '#7BDDD0', '#FAC858', '#5DA6FC', '#CCCCCC'];
                  return colorList[params.dataIndex];
                },
              }
            }
          },
        ]
      };
      this.chart2 = echarts.init(this.$refs.secondChart)
      this.chart2.setOption(this.secondOption)
      window.addEventListener('resize', () => {
        if (this.chart2) {
          this.chart2.resize()
        }
      })
      
    },
    initThird () {
      let data1 = [12, 23, 34, 45,12, 23, 34, 45]
      const lineData = [100,100,100,100,100,100,100,100]
      const max = data1.concat(lineData)
        .reduce((pre, cur) => pre > cur ? pre : cur, 0)
      let thirdOption = {
        color: ['#5DA6FC'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
          },
          formatter: function (params, ticket, callback) {
            return params[0].name+ '：'+params[0].value
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          borderColor: '#eee'
        },
        yAxis: {
          type: 'value',
          max: max,
          // boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          },
          axisLabel: {
            color: '#999'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee',//网格线的颜色
              width: 1,
              type: 'dashed'
            }
          },
          axisTick: {
            alignWithLabel: true
          },
        },
        xAxis: [{
          type: 'category',
          data: ['法人风险实体', '股东风险实体', '子公司风险实体', '关联人','法人风险实体', '股东风险实体', '子公司风险实体', '关联人'],
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#999',
            rotate: 45
          },
          axisTick: {
            alignWithLabel: true
          }
        }, {
          type: 'category',
          show: false,
          data: ['法人风险实体', '股东风险实体', '子公司风险实体', '关联人','法人风险实体', '股东风险实体', '子公司风险实体', '关联人']
        }],
        series: [
          {
            data: data1,
            type: 'bar',
            barWidth: 24,
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0],
            }
          },
          {
                xAxisIndex: 1,
                itemStyle: {
                    color: 'rgba(18, 18, 18, 0)'
                },
                data: data1.map(() => max),
                barWidth: 34,
                emphasis: {
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            x2: 0,
                            y: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: 'rgba(123,221,208,0.05)'
                                }
                            ],
                        },
                    },
                },
                type: 'bar'
            }
        ]
      };
      let chart3 = echarts.init(this.$refs.thirdChart)
      chart3.setOption(thirdOption)
      window.addEventListener('resize', () => {
        if (chart3) {
          chart3.resize()
        }
      })
    },
    initForth () {
      let data1 = [12, 23, 34, 45,12, 23, 34, 45, 34, 45]
      const lineData = [100,100,100,100,100,100,100,100,100,100]
      const max = data1.concat(lineData)
        .reduce((pre, cur) => pre > cur ? pre : cur, 0)
      let forthOption = {
        color: ['#5DA6FC'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
          },
          formatter: function (params, ticket, callback) {
            return params[0].name+ '：'+params[0].value
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          borderColor: '#eee'
        },
        yAxis: {
          type: 'value',
          // boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: 'transparent'
            }
          },
          axisLabel: {
            color: '#999'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee',//网格线的颜色
              width: 1,
              type: 'dashed'
            }
          },
          axisTick: {
            alignWithLabel: true
          }
        },
        xAxis: [{
          type: 'category',
          data: ['法人风险实体', '股东风险实体', '子公司风险实体', '关联人','法人风险实体', '股东风险实体', '子公司风险实体', '关联人', '子公司风险实体', '关联人'],
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#999',
            rotate: 45
          },
          axisTick: {
            alignWithLabel: true
          }
        },, {
          type: 'category',
          show: false,
          data: ['法人风险实体', '股东风险实体', '子公司风险实体', '关联人','法人风险实体', '股东风险实体', '子公司风险实体', '关联人', '子公司风险实体', '关联人']
        }],
        series: [
          {
            data: data1,
            type: 'bar',
            barWidth: 12,
            itemStyle: {
              barBorderRadius: [13, 13, 0, 0],
            }
          },
          {
                xAxisIndex: 1,
                itemStyle: {
                    color: 'rgba(18, 18, 18, 0)'
                },
                data: data1.map(() => max),
                barWidth: 20,
                emphasis: {
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            x2: 0,
                            y: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: 'rgba(123,221,208,0.05)'
                                }
                            ],
                        },
                    },
                },
                type: 'bar'
            }
        ]
      };
      let chart4 = echarts.init(this.$refs.forthChart)
      chart4.setOption(forthOption)
      window.addEventListener('resize', () => {
        if (chart4) {
          chart4.resize()
        }
      })
    },
    handleLegend (item, index) {
      item.isHight = !item.isHight
      if (!item.isHight) {
        this.secondData.splice(index, 1)
        this.secondYaxis.splice(index, 1)
        
      } else {
        this.secondData.splice(index,0, item.value)
        this.secondYaxis.splice(index,0, item.name)
      }
      this.chart2.setOption(this.secondOption)
    }
  }
}
</script>
<style lang="scss">
.pro-ana-wrap {
  height:880px;
  // background-image: url(./bg.png);
  background-size: cover;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  .word-box{
    color:#888;
    padding-top:30px;
    margin-bottom:68px;
    line-height: 22px;
    span{
      color:#222;
    }
  }
  .pro-title {
    font-weight: bold;
    font-size:14px;
    &::before{
      width: 4px;
      height: 14px;
      display: inline-block;
      background: #096DD9;
      border-radius: 2px;
      margin-right:10px;
      vertical-align: top;
      content: ''
    }
  }
  .second-chart{
    width:auto;
    height:300px;
  }
  .el-row{
    width:100%;
  }
  .pl-44{
    padding-left:44px;
  }
  .pr-44{
    padding-right:44px;
  }
  .second-legend{
    color:#555;
    text-align: center;
    .legend-item{
      display: inline-block;
      cursor: pointer;
      &:nth-of-type(1) {
        span::before {
          background: #5DA6FC;
        }
      }
      &:nth-of-type(2) {
        span::before {
          background: #73C4F7;
        }
      }
      &:nth-of-type(3) {
        span::before {
          background: #7BDDD0;
        }
      }
      &:nth-of-type(4) {
        span::before {
          background: #FAC858;
        }
      }
    }
    .legend-item-gray{
      color:rgb(202, 202, 202)!important;
      span:before{
        background:rgb(202, 202, 202)!important;
      }
    }
    span{
      font-size:12px;
      
      &::before{
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #5DA6FC;
        border-radius: 50%;
        margin-right:8px;
        margin-left:24px;
        content: ''
      }
      
    }
    b{
      font-weight: normal;
      font-size:12px;
      margin-left:3px;
    }
  }
}
</style>